<template>
	<div class="container">
		<div class="img-wrapper">
			<img
				class="mask"
				:src="playList && playList.coverImgUrl"
				alt=""
				id="blur"
			/>
			<div class="img">
				<van-image
					width="7rem"
					height="7rem"
					fit="cover"
					:src="playList && playList.coverImgUrl"
				/>
				<div class="play-count">
					<van-icon name="service-o" />
					{{
						((playList && playList.playCount) / 10000).toFixed(1)
					}}万
				</div>
				<div class="btn">
					<div class="name">歌单</div>
				</div>
			</div>
			<div class="text">
				<div class="title overflow">
					{{ playList && playList.name }}
				</div>
				<div class="creator">
					<van-image
						round
						width="2rem"
						height="2rem"
						:src="playList && playList.creator.avatarUrl"
					/>
					<span>{{ playList && playList.creator.nickname }}</span>
				</div>
			</div>
		</div>
		<div class="list">
			<van-sidebar class="text">
				<van-sidebar-item title="歌曲列表" />
			</van-sidebar>
			<song-list :list="songListInformation" mode="normal" />
		</div>
		<van-sidebar class="text">
			<van-sidebar-item :title="`最新评论(${commentList.length})`" />
		</van-sidebar>
		<div class="comment-list" v-for="item in commentList" :key="item.id">
			<div class="creator">
				<div class="avatar">
					<van-image
						round
						width="2rem"
						height="2rem"
						:src="item.avatarUrl"
					/>
					<div class="nickname">
						<div>{{ item.nickname }}</div>
						<div class="time">{{ item.time }}</div>
					</div>
				</div>
				<div class="liked-count">
					{{ item.likedCount }}
					<van-icon name="good-job-o" />
				</div>
			</div>
			<div class="comment-content" v-if="!item.beReplied[0]">
				{{ item.content }}
			</div>
			<div
				v-else
				class="beReplied comment-content"
				v-for="subItem in item.beReplied"
				:key="subItem.beRepliedCommentId"
			>
				<span
					>回复@{{ subItem.user.nickname }}：{{ item.content }}</span
				>
				<div class="sub-comment">
					@{{ subItem.user.nickname }}：{{ subItem.content }}
				</div>
			</div>
		
		</div>
	</div>
</template>

<script>
import moment from "moment";
import eventBus from "@/event-bus";
export default {
	data() {
		return {};
	},
	computed: {
		playList() {
			return eventBus.songListInformation.playlist;
		},
		songListInformation() {
			return eventBus.songListInformation.playlist?.tracks
				.slice(0, 20)
				.map((item, i) => ({
					id: item.id,
					name: item.name, // 歌曲名
					maxBr: 1, // 最大音质
					alias: item.alia[0], // 别名
					artists: item.ar, // 歌手数组
					albumName: item.al.name, // 专辑名
				}));
		},
		commentList() {
			return eventBus.commentList.map((item) => ({
				// 评论id
				id: item.commentId,
				// 评论时间
				time: moment(item.time).format("YYYY年MM月DD日"),
				// 点赞数量
				likedCount: item.likedCount,
				// 用户头像
				avatarUrl: item.user.avatarUrl,
				// 用户昵称
				nickname: item.user.nickname,
				// 评论内容
				content: item.content,
				// 评论回复
				beReplied: item.beReplied,
			}));
		},
	},
	created() {
		eventBus.$emit("updateGetSongListInformation", this.$route.query.id);
		eventBus.$emit("updateCommentList", this.$route.query.id);
	},
};
</script>

<style scoped>
.container {
	width: 100%;
	display: flex;
	flex-direction: column;
}
.img-wrapper {
	position: relative;
	width: 100%;
	height: 160px;
	display: flex;
	align-items: center;
	padding: 0 12px;
	box-sizing: border-box;
	text-shadow: 0px 0px 1px #000;
	overflow: hidden;
	color: #fff;
}
.img-wrapper .mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	display: block;
}
.list .text {
	width: 100%;
}
.img-wrapper .text {
	flex: 1;
	margin-left: 12px;
	height: 110px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.overflow {
	word-break: break-all;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 16px;
}
.img-wrapper .img {
	overflow: hidden;
	position: relative;
}
.img-wrapper .img .play-count {
	position: absolute;
	top: 4px;
	right: 4px;
	font-size: 12px;
}
.img-wrapper .img .btn {
	position: absolute;
	top: 16px;
	left: -24px;
	width: 60px;
	height: 24px;
	line-height: 24px;
	background-color: #b32c2b;
	font-size: 10px;
	border-radius: 12px;
}
.img-wrapper .img .name {
	margin-left: 30px;
}
.creator {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 8px;
}
.creator .avatar {
	display: flex;
}
.creator .nickname {
	margin-left: 4px;
	color: #666;
}
.creator > * {
	margin-right: 8px;
	font-size: 12px;
}
#blur {
	filter: blur(20px);
	transform: scale(1.5);
}
.comment-list {
	font-size: 15px;
	padding: 0 8px;
	box-sizing: border-box;
}
.comment-content {
	margin: 0 0 0 40px;
	margin-top: 12px;
}
.sub-comment {
	padding: 8px;
	box-sizing: border-box;
	border: 1px solid #eee;
	font-size: 12px;
	color: #999;
	margin-top: 4px;
}
.container .text {
	width: 100%;
}
.img {
	display: block;
}
</style>
